<script setup lang="ts" name="MenuBar">
import logo from "@/assets/PlantB.ico"

const props = defineProps({
    mid: {
        type: String,
    },
    title: {
        type: String,
        default: '窗口'
    },
    titleColor: {
        type: String,
        default: '#ccc'
    },
    barColor: {
        type: String,
        default: '#333'
    },
    logo: {
        type: Object,
        default: () => ({
            isIcon: false,
            value: logo
        })
    },
    hideLogo: {
        type: Boolean,
        default: false
    },
    systemIconColor: {
        type: String,
        default: '#fff'
    },
    couldFixTop: {
        type: Boolean,
        default: false
    },
    hideMaximize: {
        type: Boolean,
        default: false
    },
    hideMinimize: {
        type: Boolean,
        default: false
    },
    closeIcon: {
        type: String,
        default: undefined
    },
    menus: {
        type: Array<any>,
        default: () => []
    },
    menusOnRight: {
        type: Boolean,
        defalut: false
    }
})

const emits = defineEmits(['select'])
const hasMaximize = ref<boolean>(false)
const mainMenuIndex = ref<number | undefined>()
const domMenu = ref()

//监听系统按钮
const handleSystemClick = (mark: string) => {
    if (mark == 'maximize') {
        hasMaximize.value = true
    }
    if (mark == 'restore') {
        hasMaximize.value = false
    }
    window.ipcRenderer.send('GENERAL-BAR-OPERATE', { mark })
}

//监听菜单按钮点击
const handleMainMenuClick = (index: number, mark?: string) => {
    //如果存在mark，执行
    if (mark) {
        emits('select', mark)
        return
    }
    //如果多次点击，取消展示
    if (mainMenuIndex.value == index) {
        mainMenuIndex.value = undefined
        return
    }
    mainMenuIndex.value = index
    nextTick(() => {
        //鼠标移出后，子菜单隐藏
        const doms = Array.isArray(domMenu.value) ? domMenu.value : [domMenu.value]
        doms[mainMenuIndex.value ?? 0]?.addEventListener('mouseleave', () => {
            mainMenuIndex.value = undefined
        })
    })
}

const handelSubMenuClick = (mark: string) => {
    //如果有mark则关闭菜单
    if (mark) mainMenuIndex.value = undefined
    emits('select', mark)
}

const close = () => {
    window.ipcRenderer.send('GENERAL-BAR-OPERATE', { mark: 'close' })
}

onMounted(() => {
    if (props.mid) {
        //初始化每个通用窗口的句柄
        console.log('GENERAL-INIT-WINDOW', { id: props.mid })
        window.ipcRenderer.send('GENERAL-INIT-WINDOW', { id: props.mid })
        //系统通知需要还原窗口
        window.ipcRenderer.listen('UNMAXIMIZE-CALL', (e, res) => {
            console.log('shouodaoikdhjd')
            hasMaximize.value = false
        })
        //系统通知需要最大化窗口
        window.ipcRenderer.listen('MAXIMIZE-CALL', (e, res) => {
            hasMaximize.value = true
        })
    }
})

defineExpose({
    close
})
</script>
<template>
    <div class="main-content menu-bar" :style="{ backgroundColor: props.barColor }">
        <template v-if="!props.hideLogo">
            <div v-if="props.logo.isIcon" class="icon">
                <svg-icon :icon-class="props.logo.value" width="18" height="18" />
            </div>
            <!-- <div v-else class="icon" :style="{backgroundImage:`url('${props.logo.value}')`}"></div> -->
            <div v-else class="icon" :style="{ backgroundImage: `url('${props.logo.value}')` }"></div>
        </template>

        <div v-else class="xh-40 xw-10"></div>
        <div class="title" :style="{ color: props.titleColor }">
            {{ props.title }}
        </div>
        <div v-if="menusOnRight" class="space"></div>
        <div ref="domMenu" class="menu" v-for="item, mindex in props.menus" :key="mindex"
            @click="handleMainMenuClick(mindex, item.mark)">
            <svg-icon :icon-class="item.icon" width="18" height="18" class="main-menu" />
            <span class="name main-menu p-r-3-0">{{ item.name }}</span>
            <div v-if="mainMenuIndex == mindex && item.childrens && item.childrens.length" class="mc mc1">
                <div v-for="mc1 in item.childrens" :key="mc1.name" class="childmenu"
                    @click.stop="handelSubMenuClick(mc1.mark)">
                    <svg-icon v-if="mc1.type == 'checkbox' && mc1.value" icon-class="check" width="19" height="169"
                        class="p-r-2-2" />
                    <svg-icon v-else :icon-class="mc1.icon ?? ''" width="19" height="19" class="p-r-2-2" />{{ mc1.name }}
                </div>
            </div>
        </div>
        <div v-if="!menusOnRight" class="space"></div>
        <div v-if="!props.hideMinimize" class="minimize operate m-r-10-0" :style="{ color: props.systemIconColor }"
            @click="handleSystemClick('minimize')">
            <svg-icon icon-class="minimize" width="21" height="21" class="p-r-0-2" />
        </div>
        <template v-if="!props.hideMaximize">
            <div v-if="hasMaximize" class="restore operate" :style="{ color: props.systemIconColor }"
                @click="handleSystemClick('restore')">
                <svg-icon icon-class="restore" width="21" height="21" class="p-r-0-2" />
            </div>
            <div v-else class="maximize operate" :style="{ color: props.systemIconColor }"
                @click="handleSystemClick('maximize')">
                <svg-icon icon-class="maximize" width="21" height="21" class="p-r-0-2" />
            </div>
        </template>
        <div class="close operate" :style="{ color: props.systemIconColor }" @click="handleSystemClick('close')">
            <svg-icon :icon-class="props.closeIcon ?? 'close'" width="21" height="21" class="p-r-0-3" />
        </div>
    </div>
</template>
<style lang="scss">
.main-content.menu-bar {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
    /* Standard syntax */
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: row;

    .icon {
        width: 40px;
        height: 40px;
        // background-image:url('/PlantB.ico');
        background-position: center;
        background-size: 55% 55%;
        background-repeat: no-repeat;
        padding-left: 2px;
        -webkit-app-region: drag;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title {
        max-width: 180px;
        padding-right: 20px;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        font-size: 14px;
        -webkit-app-region: drag;
    }

    .menu {
        width: 70px;
        height: 39px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;

        &:hover {
            background-color: #000;

            .name.main-menu {
                color: #99CCFF;
            }

            .svg-icon.main-menu {
                color: #99CCFF;
            }
        }

        .mc1 {
            z-index: 999;
            width: 130px;
            position: absolute;
            left: 0;
            top: 38px;
            background-color: #000;
            border: solid 1px #222;

            .childmenu {
                width: 90%;
                height: 28px;
                line-height: 30px;
                border-radius: 6px;
                text-align: left;
                margin: 6px auto;
                color: #fff;
                display: flex;
                align-items: center;

                &:hover {
                    background-color: #0099CC;
                }
            }
        }
    }

    .space {
        flex: 1;
        height: 40px;
        -webkit-app-region: drag;
    }

    .operate {
        width: 40px;
        height: 39px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        &:hover {
            background-color: rgba(0, 0, 0, 0.3);
            color: #99CCFF !important;
        }
    }
}
</style>
<style lang="scss" scoped></style>
